<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script>
        const names = ['jack','tom','rose','peter','jim'];

        const luckyNames = []

        let timer = null;
        let i = -1;
        function show(){
            if(names.length == 0){
                alert('已经没有候选人了')
                return;
            }
            timer = setInterval(function (){
                i = Math.floor(Math.random()*names.length)
                document.getElementById("one").innerText = names[i];
            },100)
        }

        function stopShow(){
            clearInterval(timer)
            timer = null;
            const name = names[i]
            luckyNames.push(name);//把中奖者存入新数组
            names.splice(i,1);//把中奖者从原数组删除

            document.getElementById("all").innerText = names;
            document.getElementById("lucky").innerText = luckyNames;
        }
    </script>
</head>
<body>
    <p >
        准备抽奖的人:<span id="all"></span>
    </p>
    <p>
        已经得奖的人:<span id="lucky"></span>
    </p>
    <h1>
        获奖者:<span id="one"></span>
    </h1>
    <button onclick="show()">开始抽奖</button>
    <button onclick="stopShow()">停止抽奖</button>
</body>
<script>
    document.getElementById("all").innerText = names;
</script>
</html>